import React,{useEffect} from 'react'
import { useLocation, useHistory } from 'react-router-dom'
import { Card, Button,Row, Col  } from 'antd';

import GTitle from '../../components/GTitle/GTitle';

import {useSelector,useDispatch} from 'react-redux'
import {addCount,reduceCount} from '../../redux/action/count'
import {addCount2,reduceCount2} from '../../redux/action/count2'

export default function deviceDetail() {

    let count = useSelector(state => {
        return state.count.number
    });
    let count2 = useSelector(state => {
        return state.count2.number
    });
    const dispatch = useDispatch();

    const router = useHistory()
    const routes = useLocation()
    useEffect(() => {
        // console.log('123',count)
    })
    return (
        <div id="pageDeviceDetail" className="pageBox">
            <GTitle title="设备详情">
                <Button type="default" onClick={() => { router.go(-1) }}>返回</Button>
            </GTitle>
            <Card title="基本信息" >
                <Row>
                    <Col span={8}>{routes.state.name}</Col>
                    <Col span={8}>{routes.state.price}</Col>
                    <Col span={8}>{routes.state.count}</Col>
                </Row>
            </Card>
            <div>count1  ---  {count}</div>
            <button onClick={() => dispatch(reduceCount(count))}>-</button>
            <button onClick={() => dispatch(addCount)}>+</button>
            <div>count2  ---  {count2}</div>
            <button onClick={() => dispatch(reduceCount2(count2))}>-</button>
            <button onClick={() => dispatch(addCount2)}>+</button>
        </div>
    )
}
